<template>
  <div class="login-content">
    <div class="login-box">
      <div class="login-input">
        <div class="login-title">博客空间登录</div>
        <n-input
          type="text"
          placeholder="手机号"
          size="large"
          v-model="mobile"
          :on-input="moblieChange"
        />
        <div class="login-divd"></div>
        <n-input
          type="password"
          show-password-on="mousedown"
          placeholder="密码"
          size="large"
          v-model="password"
          :on-input="passwordChange"
        />
        <div class="login-btn">
          <n-button type="primary" color="#63e2b7" @click="login">
            登 录
          </n-button>
        </div>
      </div>
      <div class="regist-btn">
        <n-button quaternary size="tiny" @click="go_register">
          去注册
        </n-button>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {Login} from '../../api/user.ts'
import {ref,Ref} from 'vue'
import { useRouter } from "vue-router";
const router = useRouter()
const mobile:Ref<string> = ref("")
const password:Ref<string> = ref("")

const moblieChange = (value:string) => {
  mobile.value = value
}

const passwordChange = (value:string) => {
  password.value = value
}

const login = async () => {
  if(mobile.value.length != 11){
    window.$message.warning("手机号必需11位")
    return
  }
  if(mobile.value == "" || password.value == ""){
    window.$message.warning("请填写完整信息")
    return
  }
  const data:any = await Login({
    phone: mobile.value,
    password: password.value
  })
  if(data.code != "200"){
    window.$message.error(data.message)
  }else{
    window.$message.success("登录成功")
    localStorage.setItem("token", mobile.value)
    localStorage.setItem("avatar", data.data.avatar)
    localStorage.setItem("user_id", data.data.user_id)
    let preRouterUrl = router.options.history.state.back as string
    if(preRouterUrl && preRouterUrl.includes("shareSpace")){
      router.push(preRouterUrl)
    }else{
      router.push("/home")
    }
  }
}

const go_register = () => {
  router.push("/register")
}
  
</script>

<style lang="scss" scoped>
  .login-content{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-box{
      width: 500px;
      min-height: 350px;
      border: 1px solid rgba(0,255,255,0.7);
      box-shadow: 0 2px 12px 0 rgba(0,255,255,0.7);      

      .login-input{
        margin: 40px 40px 0 40px;

        .login-title{
          font-size: 30px;
          text-align: center;
          margin: 0 0 30px 0;
        }

        .login-divd{
          height: 40px;
        }

        .login-btn{
          margin-top: 30px;
          text-align: center;
        }
      }

      .regist-btn{
        width: 100%;
        text-align: center;
        padding-top: 10px;
      }
    }
  }
</style>